<template>
  <div class="cart-container">
    <h2>Your Cart</h2>
    <p v-show="!cartProduct.length">Please add some products to cart.</p>
    <ul>
      <li v-for="item in cartProduct" :key="item.id">
        <span>{{item.title}}</span> - <span>{{item.price}}</span> x <span>{{ item.quantity }}</span>
      </li>
    </ul>
    <p>Total: {{totalPrice}}</p>
    <button :disabled='!cartProduct.length' @click="checkout(cartProduct)">Checkout</button>
    <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}</p>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
export default {
  name: 'Cart',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {
    ...mapState('cart', ['name', 'checkoutStatus']),
    ...mapGetters('cart', ['cartProduct', 'totalPrice'])
  },
  watch: {},
  mounted () {},
  methods: {
    ...mapActions('cart', ['checkout'])
  }
}

</script>
<style lang='less' scoped>
</style>
